<template>
  <div class="m">
    <div style="width: 320px; margin-right: 20px">
      <div style="height: 194px" class="comp">
        <Lunbo></Lunbo>
        <!-- <img src="..\assets\zhyq\监控视频轮播.png" /> -->
      </div>
      <div style="height: 427px" class="comp">
        <div class="title">
          告警统计
          <a-dropdown class="choose" style="margin-top: 10px">
            <a> 今日统计 <a-icon type="down" /> </a>
            <a-menu slot="overlay" class="choose-menu">
              <a-menu-item> 1 </a-menu-item>
              <a-menu-item> 2 </a-menu-item>
              <a-menu-item> 3 </a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>
        <p class="jiejue">
          待解决
          <span style="color: #e67150; margin-right: 30px">5</span>已解决
          <span style="color: #65faff">10</span>
        </p>
        <div style="width: 100%; height: 160px" id="Pie_gao"></div>
        <div style="width: 100%; height: 175px" id="Bar"></div>
      </div>
      <div style="height: 271px" class="comp">
        <div class="title">
          事件列表<a-date-picker
            v-model="time1"
            @change="onChange"
            dropdownClassName="DatePicker"
            class="date-picker"
            ><span
              ><a-icon
                slot="suffixIcon"
                type="calendar"
                class="date-picker-icon"
              />{{ time1 }}
            </span></a-date-picker
          >
        </div>
        <div class="sousuo">
          <el-input
            v-model="input"
            placeholder="请输入关键字"
            suffix-icon="el-icon-search"
          ></el-input>
          <el-button type="text" class="chaxun-button">查询</el-button>
        </div>
        <el-table :data="tableData" style="width: 320px" height="160px">
          <el-table-column
            prop="cameraName"
            label="时间"
            align="left"
            width="80"
          >
          </el-table-column>
          <el-table-column
            prop="task_type"
            label="区域"
            align="center"
            width="60"
          >
          </el-table-column>
          <el-table-column
            prop="task_name"
            label="事件"
            align="center"
            width="60"
          >
          </el-table-column>
          <el-table-column
            prop="task_name"
            label="状态"
            align="center"
            width="55"
          >
          </el-table-column>
          <el-table-column label="操作" align="center" width="60">
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="4"
          :total="total"
          :pager-count="5"
          prev-text="上一页"
          next-text="下一页"
        >
        </el-pagination>
      </div>
    </div>
    <div style="width: 1206px">
      <img src="..\assets\cysj\总览区域.png" class="luxian" width="700px" />
      <img src="..\assets\cysj\密度阶梯.png" class="midu" />
      <div style="height: 604px">
        <div style="width: 30px; margin-top: 60px">
          <el-button type="text" class="map-button">
            <img src="..\assets\cysj\总览按钮.png"
          /></el-button>
        </div>
      </div>
      <div style="height: 194px" class="comp">
        <img src="..\assets\zhyq\总览最新事件.png" />
      </div>
    </div>
    <div style="width: 319px !important; margin-left: 20px">
      <div style="height: 359px" class="comp">
        <div class="title">
          任务看板
          <el-button type="text" class="more">更多 ></el-button>
        </div>
        <div class="dangqian">
          当前班次
          <span style="margin-right: 28px">周四白班</span>
          领班
          <span
            >张晓雪
            <el-button type="text" class="message"
              ><i class="el-icon-message"></i></el-button
          ></span>
        </div>
        <div class="dangqian">当班公告</div>
        <div class="gonggao">暂无</div>
        <div class="dangqian">
          当前任务
          <el-switch
            v-model="value"
            active-color="#1af7ff"
            inactive-color="#ffffff"
            inactive-text="巡更地图"
          >
          </el-switch
          ><a-dropdown class="choose">
            <a> 今日统计 <a-icon type="down" /> </a>
            <a-menu slot="overlay" class="choose-menu">
              <a-menu-item> 1 </a-menu-item>
              <a-menu-item> 2 </a-menu-item>
              <a-menu-item> 3 </a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>
        <div style="width: 100%; display: flex">
          <span class="Bar2-item"
            >紧急<span style="color: #e67150">5</span></span
          ><span class="Bar2-item"
            >延误<span style="color: #feb628">2</span></span
          ><span class="Bar2-item"
            >一般<span style="color: #0192ed">20</span></span
          >
        </div>

        <div style="width: 100%; height: 110px" id="Bar2"></div>
      </div>
      <div style="height: 265px" class="comp">
        <div class="title">
          人车通行记录
          <el-button type="text" class="more">更多 ></el-button>
        </div>
        <span class="biaoqian" style="color: #feb628">
          <img src="..\assets\zhyq\人流量.png" /> 200
        </span>
        <span class="biaoqian" style="color: #e67150">
          <img src="..\assets\zhyq\车流量.png" />80
        </span>
        <div style="position: relative">
          <a-dropdown class="choose-left">
            <a> 今日统计 <a-icon type="down" /> </a>
            <a-menu slot="overlay" class="choose-menu">
              <a-menu-item> 1 </a-menu-item>
              <a-menu-item> 2 </a-menu-item>
              <a-menu-item> 3 </a-menu-item>
            </a-menu>
          </a-dropdown>
          <div
            style="width: 100%; height: 200px; position: absolute; z-index: 87"
            id="Line"
          ></div>
        </div>
      </div>
      <div style="height: 272px" class="comp">
        <div class="title">停车位统计</div>
        <div style="width: 100%; height: 240px" id="Pie2"></div>
      </div>
    </div>
  </div>
</template>

<script >
import Lunbo from "@/components/zhyq/Lunbo.vue";
export default {
  data() {
    return {
      time1: undefined,
      input: "",
      tableData: [],
      total: 0,
      value: true,
    };
  },
  mounted() {
    this.time1 = this.getData(new Date());
    this.drawPie_gao();
    this.drawBar();
    this.drawBar2();
    this.drawPie2();
    this.drawLine();
  },
  components: {
    Lunbo,
  },
  methods: {
    drawPie_gao() {
      let myCHart = this.$echarts.init(document.getElementById("Pie_gao"));
      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          top: "center",
          right: "5%",
          icon: "rect",
          textStyle: { color: "#ffffff", fontSize: 12 },
          itemWidth: 14,
          itemGap: 20,
        },
        series: [
          {
            type: "pie",
            right: 100,
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              color: "#fff",
              formatter: "{d}\n{b}",
              textStyle: { fontSize: 10 },
            },
            color: ["#0192ed", "#feb628", "#e67150"],
            emphasis: {
              label: {
                show: true,
                fontSize: "16",
                position: "center",
                textStyle: { fontSize: 12 },
              },
            },
            labelLine: {
              show: true,
              length: "10",
              length2: "10",
            },
            data: [
              { value: 1048, name: "黑名单" },
              { value: 735, name: "可疑人员" },
              { value: 580, name: "设备故障" },
            ],
          },
        ],
      };
      myCHart.setOption(option);
    },
    drawBar() {
      let myCHart = this.$echarts.init(document.getElementById("Bar"));
      let option = {
        title: {
          text: "告警次数",
          textStyle: { color: "#fff" },
          top: 14,
        },
        xAxis: {
          data: [
            "8时",
            "12时",
            "16时",
            "20时",
            "0时",
            "4时",
            "8时",
            "12时",
            "16时",
          ],
          axisLabel: {
            textStyle: {
              color: "#999",
              fontSize: 10,
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "#999",
            },
          },
        },
        grid: {
          bottom: "16%",
          top: "30%",
        },
        series: [
          {
            type: "bar",

            data: [23, 46, 15, 26, 86, 23, 9, 45, 63],
            barWidth: "30%",
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#83bff6" },
                { offset: 0.5, color: "#188df0" },
                { offset: 1, color: "#188df0" },
              ]),
              borderRadius: [15, 15, 0, 0],
            },
          },
        ],
      };
      myCHart.setOption(option);
    },
    drawBar2() {
      let myCHart = this.$echarts.init(document.getElementById("Bar2"));
      let option = {
        xAxis: {
          type: "value",
          show: false,
        },
        yAxis: {
          data: ["一般", "延误", "紧急"],
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          axisLine: {
            lineStyle: { color: "#fff" },
          },
          axisTick: {
            show: false,
          },
        },
        grid: {
          bottom: "10px",
          left: "45px",
          top: "10px",
        },
        series: [
          {
            type: "bar",

            data: [45, 15, 23],
            barWidth: "35%",
            itemStyle: {
              normal: {
                color: function (params) {
                  //首先定义一个数组
                  var colorList = ["#0192ed", "#feb628", "#e67150"];
                  return colorList[params.dataIndex];
                },
              },
            },
          },
        ],
      };
      myCHart.setOption(option);
    },
    drawLine() {
      let myCHart = this.$echarts.init(document.getElementById("Line"));
      let option = {
        legend: {
          icon: "rect",
          textStyle: { color: "#ffffff", fontSize: 12 },
          right: 20,
          itemWidth: 14,
          data: ["园区人流", "园区车流"],
        },
        xAxis: {
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          axisLabel: {
            textStyle: {
              color: "#999",
              fontSize: 10,
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: { color: "#fff" },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: true,
            lineStyle: { color: "#fff" },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        grid: {
          bottom: "20%",
          left: 50,
          top: "20%",
          width: "80%",
        },
        series: [
          {
            type: "line",
            name: "园区人流",
            data: [323, 546, 315, 426, 686, 123, 89],
            lineStyle: { color: "#feb628" },
          },
          {
            type: "line",
            name: "园区车流",
            data: [23, 46, 15, 26, 86, 13, 9],
            lineStyle: { color: "#e67150" },
          },
        ],
        color: ["#feb628", "#e67150"],
      };
      myCHart.setOption(option);
    },
    drawPie2() {
      let myCHart = this.$echarts.init(document.getElementById("Pie2"));
      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5px",
          right: "10px",
          icon: "rect",
          textStyle: { color: "#ffffff", fontSize: 12 },
          itemWidth: 14,
          itemGap: 20,
        },
        grid: { left: 20 },
        series: [
          {
            type: "pie",
            radius: ["50%", "70%"],
            width: "70%",
            top: "10px",
            left: "50px",
            avoidLabelOverlap: false,
            label: {
              show: true,
              color: "#fff",
              formatter: "{d}\n{b}",
              textStyle: { fontSize: 10 },
            },
            color: ["#0192ed", "#feb628", "#e67150"],
            emphasis: {
              label: {
                show: true,
                fontSize: "16",
              },
            },
            labelLine: {
              show: true,
            },
            data: [
              { value: 1048, name: "已使用" },
              { value: 735, name: "未使用" },
            ],
          },
        ],
      };
      myCHart.setOption(option);
    },
    onChange(value, dateString) {
      this.time1 = dateString;
    },
    getData(timeStamp) {
      let year = new Date(timeStamp).getFullYear();
      let month =
        new Date(timeStamp).getMonth() + 1 < 10
          ? "0" + (new Date(timeStamp).getMonth() + 1)
          : new Date(timeStamp).getMonth() + 1;
      let date =
        new Date(timeStamp).getDate() < 10
          ? "0" + new Date(timeStamp).getDate()
          : new Date(timeStamp).getDate();
      return year + "-" + month + "-" + date;
    },
  },
};
</script>

<style lang="less" scoped>
.m {
  display: flex;
  width: 1880px;
  background-image: url("../assets/zhyq/背景地图.png");
}
.comp {
  margin: 20px 0;
  border: 1px solid #3c6fd2;
  background-color: #111e4b;
  display: flow-root;
}
.title {
  color: #1af7ff;
  text-align: left;
  font-size: 16px;
  padding-left: 10px;
  background-image: url(../assets/image/当前检测-标题-背景图片.png);
  background-repeat: no-repeat;
  background-size: 171px 30px;
  line-height: 30px;
  height: 30px;
  font-weight: bold;
}
/deep/.el-button + .el-button {
  margin-left: 0px;
}
/deep/ .map-button {
  padding: 0px 20px;
}
.luxian {
  position: absolute;
  left: 33%;
  bottom: 29%;
}
.midu {
  position: absolute;
  left: 74%;
  bottom: 70%;
}

/*人车通行记录*/
.choose-left {
  left: 10px;
  position: absolute;
  z-index: 88;
  margin-left: 10px;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 0px;
  font-weight: normal;
  font-size: 14px;
  height: 22px;
  width: 85px;
  padding-left: 5px;
  line-height: 20px;
  background-color: transparent;
}
.biaoqian {
  width: 100px;
  text-align: left;
  margin: 10px;
  display: inline-block;
}
.biaoqian > img {
  margin-right: 10px;
}

/* 任务看板 */
/deep/.more {
  color: #ffffff;
  float: right;
  margin-right: 10px;
  line-height: 8px;
}
.dangqian {
  color: #ffffff;
  margin: 20px 10px 0 10px;
  text-align: left;
}
.dangqian > span {
  border: 1px solid #1af7ff;
  border-radius: 15px;
  padding: 0 10px;
  margin-left: 10px;
  font-size: 12px;
}
/deep/.message {
  padding: 0;
  color: #ffffff;
}
.gonggao {
  border: 1px solid #1af7ff;
  margin: 10px 10px;
  padding: 10px;
  color: #ffffff;
  font-size: 10px;
  text-align: left;
  height: 50px;
}
/deep/.el-switch__label {
  color: #ffffff;
  height: 23px;
}
/deep/ .el-switch__core:after {
  background-color: #000;
}
.Bar2-item {
  display: inline-block;
  color: #fff;
  padding: 2px 10px;
  border: 1px solid #65faff;
  margin: 5px 5px;
  border-radius: 5px;
  text-align: left;
}
.Bar2-item > span {
  margin-left: 5px;
  font-weight: bold;
}

/* 告警统计 */
// 下拉框
.choose {
  float: right;
  margin-right: 10px;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 0px;
  font-weight: normal;
  font-size: 14px;
  height: 22px;
  width: 85px;
  padding-left: 5px;
  line-height: 20px;
  background-color: transparent;
}
.choose-menu {
  background-color: transparent;
  border: 1px solid #ffffff;
  border-radius: 0px;
  width: 85px;
}
// 文字
.jiejue {
  color: #ffffff;
  text-align: left;
  margin: 20px 10px;
}

/* 检测记录 时间选择器样式 */
.date-picker {
  float: right !important;
  margin-top: 10px !important;
  margin-right: 10px !important;
}
.date-picker span {
  width: 78px;
  height: 20px;
  color: #ffffff;
  padding: 2px 10px;
  font-size: 12px;
  border: 1px solid #ffffff;
  font-weight: normal;
}
.date-picker-icon {
  margin-right: 5px;
  color: #fff;
  font-size: 14px;
}
.center {
  display: flex;
  height: 160px;
  margin: 20px 0;
}

/* 表格样式 */
/deep/ .el-table {
  background-color: transparent !important;
}
/deep/.el-table td,
/deep/.el-table th.is-leaf {
  border-bottom: 0px solid #ebeef5;
}
/deep/ .el-table th {
  color: #ffffff; /* 字体颜色 */
  font-size: 14px;
  background-color: transparent !important; /* 背景透明 */
  border: 0;
  text-align: center;
  padding: 0px 0;
  height: 24px;
  font-weight: normal;
}
/deep/ .el-table tr,
/deep/.el-table td {
  color: #ffffff;
  font-size: 10px;
  text-align: center;
  padding: 0px 0;
  background-color: transparent; /* 背景透明 */
  border: 0;
  height: 24px;
}
/deep/ tbody tr:nth-child(1),
/deep/ tbody tr:nth-child(3) {
  background-color: #142766;
}
/deep/.el-table::before {
  background-color: transparent;
}
/deep/ .el-table tbody tr:hover > td {
  background-color: rgba(256, 256, 256, 0.25) !important;
}

/* 分页样式 */
/deep/ .el-pagination.is-background .el-pager li {
  background-color: transparent;
  border: 1px solid #ffffff;
  font-size: 10px;
  border-radius: 4px;
  min-width: 20px;
  line-height: 18px;
  height: 20px;
}
/deep/ .el-pagination.is-background .btn-next,
/deep/ .el-pagination.is-background .btn-prev {
  background-color: transparent;
  border: 1px solid #ffffff;
  border-radius: 15px;
  width: 60px;
  height: 20px;
}

/deep/.el-pagination span:not([class*="suffix"]) {
  font-size: 10px;
  line-height: 18px;
}
/deep/.el-pagination.is-background .btn-next,
/deep/.el-pagination.is-background .btn-prev,
/deep/.el-pagination.is-background .el-pager li {
  color: #ffffff;
}
/* 搜索栏样式 */
.sousuo {
  float: right;
  text-align: right;
  width: 100%;
}
/deep/.el-input {
  width: 120px;
  vertical-align: middle;
}
/deep/.el-input__inner {
  background-color: transparent !important;
  border-radius: 22px;
  font-size: 12px;
  height: 20px;
}
/deep/.el-input__icon {
  line-height: 22px;
}
/deep/.chaxun-button {
  color: #ffffff;
  margin: 0 20px 0 10px;
}
</style>
